<html>
<head>
<style type="text/css">
/* sed -e "s@^.*\*\* test \*\*.*$@@g" tabs.html > tabs-working.html */

/* general stuff */
div.tab-holder
{

}

.tab-list ul, .tab-list li
{
  list-style-type: none;
  display: inline;
  margin: 0;
  padding: 0;
}

.tab-list li
{

}

.tab-list span
{
  margin: -2px;
}

.tab-list a
{
  text-decoration: none;
}

/* specific anchor stuff */
.tab-list a:link
{

}

.tab-list a:visited
{

}

.tab-list a:hover /* breaks under microsoft 6.0 */
{

}

/* more specific anchor stuff */
.tab-list a.active:link
{

}

.tab-list a.active:visited
{

}

.tab-list a.active:hover /* breaks under microsoft 6.0 */
{

}


/* specific span stuff */
span.left
{
  background-image: url('images/left_off.gif'); /* default: inactive */
  background-repeat: no-repeat;
  width: 21px;
  height: 21px;
}

span.right
{
  background-image: url('images/right_off.gif'); /* default: inactive */
  background-repeat: no-repeat;
  width: 21px;
  height: 21px;
}

span.fill
{
  background-image: url('images/fill_off.gif'); /* default: inactive */
  background-repeat: repeat-x;
  height: 21px;
}

/* more specific span stuff */
/* first */
a.first span.left
{

}

a.first span.right
{

}

a.first span.fill
{

}

/* last */
a.last span.left
{

}

a.last span.right
{

}

a.last span.fill
{

}

/* active */
a.active span.left
{

  background-image: url('images/left_on.gif');
}

a.active span.right
{

  background-image: url('images/right_on.gif');
}

a.active span.fill
{
  background-image: url('images/fill_on.gif');
}

/* hold on to this, might come in handy */
<!--[if IE]>
<![endif]-->
</style>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? " https://ssl." : "http://www.");
document.write("\<script src='" + gaJsHost + " google-analytics.com/ga.js' type='text/javascript'>\<\/script>" );
var pageTracker = _gat._getTracker("UA-3115657-1");
pageTracker._initData();
pageTracker._trackVisit();
</script>
<script type="text/javascript" src="../ToolMan/core.js"></script>
<script type="text/javascript" src="../ToolMan/events.js"></script>
<script type="text/javascript" src="../ToolMan/css.js"></script>
<script type="text/javascript" src="../ToolMan/coordinates.js"></script>
<script type="text/javascript" src="../ToolMan/drag.js"></script>
<!--<script type="text/javascript" src="../ToolMan/dragsort.js"></script>-->

<script type="text/javascript" src="../jsTool/core-ext.js"></script>
<script type="text/javascript" src="../jsTool/intersection-ext.js"></script>
<script type="text/javascript" src="../jsTool/drag2container-ext.js"></script>
<script type="text/javascript" src="../jsTool/test-ext.js"></script>

<script type="text/javascript">
window.onload = function () 
{
	var drag2cs = Tool.drag2container();
	var drag = ToolMan.drag();
	//var dragsort = ToolMan.dragsort();
	var events = ToolMan.events();
	var dragGroup = null;

	_$ =
	{
		getById: function (id) { return document.getElementById(id); },
		getByTagName: function (str, element)
		{
			var src = element || document;
			return src.getElementsByTagName(str);
		}
		
		// ...
	};

	/// handler for tab onclick
	var activate = function ()
	{
		/// this was already active
		if (this.className.match(/active/)) { return false; }

		var parent = this.parentNode.parentNode;
		var siblings = parent.getElementsByTagName('A');
		if (siblings.length)
		for (var a=0, len=siblings.length; a<len; ++a)
			if (siblings[a] != 'undefined')
			{
				if (siblings[a].className)
				{
					var re = /active/; 
					siblings[a].className = siblings[a].className.replace(re,"");
					/// with moving tabs, you can no longer assume
					/// there is only one active tab, so we no longer break
					//break; 
				}
			}
		this.className += " active";
		
		// do something
		Tool.test().print1 (this.getElementsByTagName('SPAN')[1].innerHTML);
		return false; /// stop default agent behaviour
	}
	
	/// register handlers for onclick
	var body = _$.getByTagName('BODY')[0];
	var anchors = _$.getByTagName('A', body);
	for (var i in anchors)
	{
		events.register
			(
				anchors[i],
				"click",
				activate
			);
	}
	
	/// sortable lists
	var lists = _$.getByTagName('UL', body);
	var real_lists = new Array();
	for (var l in lists)
	{
		if (lists[l] !=  "undefined")
			if (lists[l].tagName)
				if (lists[l].tagName == 'UL')
		{
			//dragsort.makeListSortable (lists[l]);
			real_lists.push(lists[l]);
		}
	}

	/// containable items
	var items = _$.getByTagName('LI', body);
	for (var i in items)
	{
		if (items[i] != 'undefined')
			if (items[i].tagName)
				if (items[i].tagName == 'LI')
		{	 
			drag2cs.makeItemContainable(items[i], real_lists /** add behaviour **/);
		}		
	}
} // end of window.onload
</script>
</head>

<body>
<div class="tab-holder">
<ul class="tab-list">
  <li>
    <a href="#">
      <span class="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="fill">aaaaaaaaa</span>
      <span class="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="fill">bbbb</span>
      <span class="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </a>
  </li>
  <li>
    <a href="#" class="active">
      <span class="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="fill">ccccccc</span>
      <span class="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="fill">dd</span>
      <span class="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </a>
  </li>
</ul>
</div>

<br style="clear: left" />

<div class="tab-holder">
<ul class="tab-list">
  <li>
    <a href="#">
      <span class="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="fill">eeeeeeeeeeeeeeeeeeeeee</span>
      <span class="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </a>
  </li>
  <li>
    <a href="#" class="active">
      <span class="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="fill">fffffff</span>
      <span class="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="fill">ggggggggggggggggggggggggggg</span>
      <span class="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </a>
  </li>
</ul>
</div>

<br style="clear: left" />

<div class="tab-holder">
<ul class="tab-list">
  <li>
    <a href="#">
      <span class="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="fill">hhh</span>
      <span class="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </a>
  </li>
  <li>
    <a href="#" class="active">
      <span class="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="fill">i</span>
      <span class="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="fill">jjjjjjjjjjjjjjjjjjjjjjjjjj</span>
      <span class="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="fill">kk</span>
      <span class="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="fill">llllllll</span>
      <span class="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="fill">nnnnnnnnnnnnnnnnnnnn</span>
      <span class="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </a>
  </li>
</ul>
</div>

</body>
</html>